
<template>
  <div style="padding-left: 5vw; padding-top: 5vw;">
    <div class="title">
      正在直播
    </div>
    <div class="list">
      <div class="item" v-for="item in 15" :key="item">
          <div class="image"></div>
          <div class="name">
            流行音乐
          </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.title {
  color: #fff;
  font-size: 5vw;
  line-height: 12vw;
  height: 12vw;
  background-color: transparent;
}

.list {
   /* 固定宽度按 */
  max-width: 95vw;
  /* x轴方向滚动 */
  overflow-x: auto;
  /* 防止换行 */
  white-space: nowrap;
  /* 隐藏滚动条 */
  scrollbar-width: none;
}

.item {
  display: inline-block;
  background-color: transparent;
  width: 18vw;
  height: 24vw;
  margin-right: 5vw;
}
.image {
  width: 18vw;
  height: 18vw;
  background-color: transparent;
  border-radius: 50%;
  border: 2px solid rgb(218, 70, 144);
  background-image: url('https://img2.baidu.com/it/u=104432159,1846416122&fm=253&fmt=auto&app=138&f=JPEG?w=550&h=500');
  background-size: cover;
}
.name {
  font-size: 3vw;
  line-height: 6vw;
  color: #fff;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

</style>